<template>
	<view class="invitationContainer">
		<!-- <canvas canvas-id='shareCanvas' style='width:375px;height:580px'></canvas> -->
		<view class="invitationBox">
			<!--  #ifdef  MP-WEIXIN -->
			<image :src="shareCode" class="scanImg"></image>
			<!--  #endif -->
			
			<!--  #ifdef  H5 -->
			<view class="scanImgBox">
				<tki-qrcode 
				ref="qrcode" 
				:val="val" 
				:size="size" 
				:unit="unit" 
				:iconSize="iconsize" 
				 :lv="lv" 
				 :onval="onval" 
				 :loadMake="loadMake"
				 :showLoading="showLoading" 
				 :loadingText="loadingText" />
			</view>
			<!--  #endif -->
			
			<view class="subTit" style="font-size: 34rpx;font-weight: bold;color: #333;">邀请您一起预约</view>
			<view class="subTit">{{roomLocation}}</view>
			<view class="subTit" style="color: #222;font-size: 26rpx;margin-top: -4rpx;">
				{{appointmentDate}} 
				<block v-if="isZjflag == 2"> 
					<text style="margin-left: 10rpx;">{{startTime}} - {{endTime}}</text>
				</block>
			</view>
			<!--  #ifdef  MP-WEIXIN -->
				<view class="saveBtn" @click="saveImg()">保存图片</view>
			<!--  #endif -->
			
				<!-- <view class="saveBtn" @click="wxShareHandler()">分享好友</view> -->
		</view>
		<canvas :style="{height: '100%',width: '100%',backgroundColor: '#FFFFFF'}" canvas-id="shareCanvas"></canvas>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				shareCode:'',
				bgCanvas: '',//canvas背景图片
				shareCodeCanvas: '',//canvas二维码
				screenWidth: '',       //设备屏幕宽度
				screenHeight: '',//设备屏幕高度
				appointmentDate: '',
				roomLocation: '',
				startTime: '',
				endTime: '',
				isZjflag: 1,//2整间1共享
				orderId: '',
				userInfo: {userName:''},
				orderInfo: null,
				//下面是二维码用到的参数
				qrCode:"",
				val: '',
				size: 120,
				iconsize: 30,
				lv: 3,
				onval: true,
				unit: 'rpx',
				loadMake: true,
				showLoading: true,
				loadingText: '二维码生成中',
			}
		},
		onLoad(options) {
			let _this = this;
			this.orderId = options.orderId;
				
			//获取用户设备信息，屏幕宽度
			uni.getSystemInfo({
				success: res => {
					_this.screenWidth= res.screenWidth;
					_this.screenHeight = res.screenHeight;
				}
			})
			this.searchInfo();
			//下载背景图片
			uni.getImageInfo({
				src: "https://t.acoer.cn/guoshiBgImg/invitationBg.png",
				success: function (res) {
					_this.bgCanvas = res.path;
				}
			})
		},
		onShow: function() {
			// #ifdef H5
			let _this = this;
			uni.request({
				url: getApp().globalData.serverUrl+'/base/base/api/getWeiXinShareParamApi',
				method: 'GET',
				data: {
					token: getApp().globalData.token,
					appId: 'wxb5299b33f8680dad',
					url: window.location.href
				}, 
				success: (res) => {
					let result = res.data.data;
					_this.$wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: 'wxb5299b33f8680dad', // 必填，公众号的唯一标识
						timestamp: result.timestamp, // 必填，生成签名的时间戳
						nonceStr: result.nonceStr, // 必填，生成签名的随机串
						signature: result.signature,// 必填，签名
						jsApiList: ["updateAppMessageShareData"] // 必填，需要使用的JS接口列表
					});
				}
			});
			this.searchUserInfo();
			// #endif	
		},
		methods: {
			searchInfo() {
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/getLaboratoryOrderDetail?route=curriculum',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					_this.orderInfo = res.data.data;
					let orderInfo = res.data.data;
					_this.val = getApp().globalData.serverUrl + '/wx/index.html#/pages/classroom/classroom?orderId='+_this.orderId;	
					let weekIdx = new Date(orderInfo.appointmentDate).getDay();
					_this.week = "周" + "日一二三四五六".charAt(weekIdx);
					
					let isZj = orderInfo.isShare == 1 ? 1 : 2;
					_this.shareCode = orderInfo.shareCode;
					_this.isZjflag = isZj;
					_this.appointmentDate = orderInfo.appointmentDate;
					_this.roomLocation = orderInfo.roomLocation;
					_this.startTime = orderInfo.startTime;
					_this.endTime = orderInfo.endTime;
					uni.getImageInfo({
						src: _this.shareCode,
						success: function (res) {
							_this.shareCodeCanvas = res.path;
						}
					})
					setTimeout(()=> {
						_this.wxShareHandler();
					},1000)
				});
			},
			saveImg() {
				let _this = this;
				let ctx = uni.createCanvasContext('shareCanvas');
				uni.showLoading({
					title:'保存中……'
				})
				let maxWidth = _this.screenWidth;
				let screenHeight = _this.screenHeight;
				console.log('screenWidth: ',maxWidth,screenHeight);
				ctx.drawImage(_this.bgCanvas, 0, 0, _this.screenWidth, 650);
				// ctx.drawImage(_this.bgCanvas, (maxWidth-maxWidth*2)/2, screenHeight-240, maxWidth*2, screenHeight);
				setTimeout(()=> {
					// ctx.drawImage(_this.shareCodeCanvas, 80,160, 150, 150);
					ctx.drawImage(_this.shareCodeCanvas, 100, 170, 150, 150);
					ctx.setFontSize(20);
					ctx.textAlign = 'center';
					ctx.setFillStyle('#333333');
					ctx.font = 'normal bold 20px sans-serif';
					ctx.fillText('邀请您一起预约',maxWidth/2,350,maxWidth);
					
					ctx.font = '16px "微软雅黑"';
					ctx.textAlign = 'center';
					ctx.fillText(_this.roomLocation,maxWidth/2,375,maxWidth);//text,x,y,maxWidth
					
					ctx.font = '12px "微软雅黑"';
					ctx.setFillStyle('#222222');
					ctx.textAlign = 'center';
					if(_this.isZjflag == 2) {
						ctx.fillText(_this.appointmentDate+' '+_this.startTime+'-'+_this.endTime,maxWidth/2,395,maxWidth);
					}else {
						ctx.fillText(_this.appointmentDate,maxWidth/2,395,maxWidth);
					}
				},800)
				
				setTimeout(()=> {
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
		　　　 　　　　　　 	x: 0,
		 　　 　　　　　　　	y: 0,
							width: uni.upx2px(750),
							height: uni.upx2px(1300),
							destWidth: uni.upx2px(750),
							destHeight: uni.upx2px(1300),
							canvasId: 'shareCanvas',
							fileType: 'jpg',
							success: function(res) {
								uni.hideLoading();
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功！'
										})
									}
								});
							}
						})
					})
				},1500)
			},
			searchUserInfo() {
				let _this = this;
				this.$utils.requestFun('/member/memberSchoolUsers/api/selectMemberUserInfoByToken?route=member',{
					token: getApp().globalData.token
				},'GET').then(res=> {
					_this.userInfo = res.data.data;
				})
			},
			wxShareHandler() {
				let _this = this;
				let descTxt = '邀请您一起预约';
				let titleTxt = '邀请您一起预约教室';
				if(_this.isZjflag == 1) {//共享
					descTxt = `${_this.userInfo.userName}邀请您${_this.appointmentDate}日一起预约${_this.roomLocation}`;
				}else {
					titleTxt = '邀请您一起使用教室'
					descTxt = `${_this.userInfo.userName}邀请您${_this.appointmentDate} ${_this.startTime}-${_this.endTime}日一起使用${_this.roomLocation}`;
				}
				// let imgUrl = this.orderInfo.laboratoryPic ? this.orderInfo.laboratoryPic : "https://t.acoer.cn/guoshiBgImg/loginIcon.png";
				let imgUrl = "https://t.acoer.cn/guoshiBgImg/loginIcon.png";
				_this.$wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
					_this.$wx.updateAppMessageShareData({ 
						title: titleTxt, // 分享标题
						desc: descTxt, // 分享描述
						link: window.location.href.split('?')[0]+'#pages/classroom/classroom?orderId='+_this.orderId, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: imgUrl, // 分享图标
						success: function () {
						  // 设置成功
						}
					})
				});	
			}
		}
	}
</script>

<style>
	.invitationContainer {
		width: 100%;
		height: 100vh;
		background-image: url("https://t.acoer.cn/guoshiBgImg/invitationBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	/*  #ifdef  MP-WEIXIN  */
	.invitationBox {
		padding-top: 340rpx;
		height: 100%;
	}
	/*  #endif  */
	/*  #ifdef  H5  */
	.invitationBox {
		padding-top: 340px;
		height: 100%;
	}
	/*  #endif  */
	.scanImg {
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.scanImgBox {
		width: 300rpx;
		height: 260rpx;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.subTit {
		text-align: center;
		font-size: 32rpx;
		line-height: 50rpx;
	}
	.saveBtn {
		width: 358rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		display: block;
		margin: 0 auto;
	}
</style>
